import React, { Component, Fragment } from 'react'
// 文章列表接口
import { getArtList, delArt } from 'api'
import { Card, Button,Table, Tooltip, Tag, Image, Modal, Message  } from 'antd'
import { ArrowDownOutlined, QuestionCircleOutlined } from '@ant-design/icons'
import { limitNum } from 'utils'
import moment from 'moment'
import XLSX from 'xlsx'

export default class ArtList extends Component {
	constructor() {
	   super();
		 this.state = {
       data:[["序号","标题","描述","内容","作者","创建时间","图片","阅读次数"]],
			 columns: [
				 {
				   title: '文章标题',
				   dataIndex: 'title',
				   key: 'title'
				 },
				 {
				   title: '文章描述',
				   dataIndex: 'desc',
					 render: (text,row,index)=>{
						 return (
						 <Tooltip title={text}>
								<span>
									{ limitNum(text) }
								</span>
							</Tooltip>
						 )
					 },
				   key: 'desc'
				 },
				 {
				   title: '作者',
				   dataIndex: 'author',
				   key: 'author'
				 },
				 {
				   title: '阅读次数',
				   dataIndex: 'readCount',
					 render: (text, row)=>{
						return (
							<Tag color={text>300?'red':'green'}>
								{text}
							</Tag>
						)
					 },
				   key: 'readCount'
				 },
				 {
				   title: '创建时间',
				   dataIndex: 'createAt',
					 render : (text)=>{
						 return (
							<span>
								{ moment(text).format('YYYY-MM-DD') }
							</span>
						 )
					 },
				   key: 'createAt'
				 },
				 {
				   title: '封面图片',
				   dataIndex: 'pic',
					 render: (text)=>{
						 return (
							<Image  src={text} />
						 )
					 },
				   key: 'pic'
				 },
				 {
					 title:"操作",
					 render: (text,row)=>{
						return (
							<Fragment>
								<Button 
									type="primary" 
									size="small"
									onClick={
										()=>{
											this.props.history.push(`/admin/artedit/${row.id}`)
										}
									}
									>编辑</Button>
								<Button onClick = { ()=>{ this.delArt(row.id) } } size="small" danger>删除</Button>
							</Fragment>
						)
					 },
					 key:'caozuo'
				 }
			 ],
			 artLists: [],
			 current: 1,
			 total:0,
			 pageSize: 10
		 }
	}
	render() {
		return (
			<Fragment>
				<Card 
					title="文章列表"
					extra={
						<Fragment>
							<Button 
                type="primary" 
                icon={ <ArrowDownOutlined/> }
                onClick = { ()=>{
                  this.exportFile()
                } }
                >导出excel</Button>
							
						</Fragment>
					}
					>
						<Button onClick={()=>{
							this.props.history.push('/admin/artadd')
						}}>增加文章</Button>
						
						<div className="lists">
								<Table 
									dataSource={ this.state.artLists } 
									columns={this.state.columns} 
									pagination={ {
										total: this.state.total,
										current: this.state.current,
										pageSize:this.state.pageSize,
										onChange : (current,pageSize)=>{
											this.setState({
												current,
												pageSize
											},()=>{
												// 重新调用请求函数
												this.fetchArtLists();
											})
										}
									} }
									/>
						</div>
				</Card>
			</Fragment>
		)
	}
	componentDidMount(){
		this.fetchArtLists()
	}
  exportFile= ()=>{
    
  		// 导出为excel
      // 处理导出的数据
      /* 
      object = {
        a:10,
        b:20,
        c:30
      }
      Object.keys(object) 获取对象下的所有key  
        ['a','b','c']
     
      Object.values(object)
        ['10','20','30']
      */
      let exportData = this.state.data;
      this.state.artLists.forEach((art)=>{
        exportData.push(Object.values(art))
      })
  		const ws = XLSX.utils.aoa_to_sheet(exportData);
  		const wb = XLSX.utils.book_new();
  		XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
  		/* generate XLSX file and send to client */
  		XLSX.writeFile(wb, "文章.xlsx")
  	};
  delArt = (id)=>{
     // 删除文章
     // 确认框
     const _this = this
     Modal.confirm({
       title: '删除文章',
       content: '您确认删除吗？',
       icon: <QuestionCircleOutlined />,
       onOk(){
        // 发送请求
        delArt(id).then(res=>{
          if(res.data.code === '200'){
            Message.success(res.data.msg, 2, ()=>{
              _this.props.history.go(0)
            })
          }
        })
       },
       onCancel(){
        
       }
     })
  }
	fetchArtLists = ()=>{
		// 获取 文章列表
		getArtList({
			current: this.state.current,
			pageSize: this.state.pageSize
		}).then(res=>{
		
			if(res.data.code === '200'){
				this.setState({
					artLists: res.data.data.lists,
					current: res.data.data.current,
					total: res.data.data.total
				})
			}
		})
	}
}
